<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style>

        /*
            @media 设备类型{}
                    all 任意类型的设备
                    screen 带有屏幕的设备
                    print 打印设备
                    speech 屏幕阅读器

            https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
         */

        /*body{*/
        /*    color: orange;*/
        /*}*/
        
        /*@media print {*/
        /*    body{*/
        /*        color: red;*/
        /*    }*/
        /*}*/

        /*@media screen, print {*/
        /*    body{*/
        /*        color: red;*/
        /*    }*/
        /*}*/


        /*
            min-width 指定最小视口，大于等于指定值时，样式生效
            max-width 指定最大视口，小于等于指定值时，样式生效
        */
        /*@media (max-width: 500px) {*/
        /*    body{*/
        /*        background-color: #bfa;*/
        /*    }*/
        /*}*/


        /*
            , 或
            not 非
            and 与
            only
                - 主要是避免一些兼容性的问题
        */
        /*@media (min-width: 500px) and (max-width:800px) {*/
        /*    body{*/
        /*        background-color: #bfa;*/
        /*    }*/
        /*}*/

        @media only screen {
            body{
                background-color: orange;
            }
        }

        
    </style>
</head>
<body>
<!--
    媒体查询（media query）
        - 通过媒体查询可以为不同的设备，不同的屏幕大小设置不同的样式
-->

<h1>今天天气真不错！</h1>

</body>
</html>